/**
 * 用户添加页面信息的js文件
 * @license MIT
 * @Author Malphite
 * @Date 2023-08-03
 * @description
 *      新增用户基础信息
 *   需要初始化时间控件，初始化表格，再给页面添加一些事件
 *
 */
("use strict");
layui.define(function (exports) {

    /**
     * @constant  模块名称
     * @description  用一个变量保存当前的模块名称
     */
    const KEY = "userAdd";

    /**
     * @constant  id名称
     * @description  用一个变量保存对应的html里面div容器的id
     */
    const ID = "UserAdd";

    /**
     * @constant  请求地址
     * @description  用一个变量保存请求地址
     */
    const URL = LAYER_BASE_URL + "/user" + "/addUser";

    /**
     * @namespace  userAdd 模块对象
     * @description  创建一个对象，用来将所有的操作最后注册到layui中
     */
    let handler = {

        /**
         * @method  主方法
         * @param {*} layero layui弹层的主体dom对象，是一个Jquery对象
         * @param {*} index layui弹层的编号，在执行关闭弹层等操作时被使用
         * @param {*} layopt 保留参数，在layui v2.8 + 这个代表layer对象
         * @param {*} option 对这个弹层的传入的参数
         * @description  这是一个入口方法，它会在layui.layer.open 的 success 回调中被调用
         */
        run: function (layero, index, layopt, option){
            /**
             * 记录下当前的弹层index,在关闭弹层的时候有用
             */
            handler.index = index;
            /**
             * 初始化layui.laydate 时间控件
             */
            handler.initLayDate();
            /**
             * 初始化layui.form 表单
             */
            handler.initForm();
            /**
             * 初始化各项绑定事件
             */
            handler.addListener();
        },
        /**
         * @method 渲染时间选择框插件
         * @description laydate 使用 rander 方法来创建一个时间控件
         * @param {String/DOM} elem 渲染的目的地，既可以是文本框也可以是div;既可以传入选择器也可以html的dom元素。这里是使用id选择器的方式进行定义
         * @param {*} type 控件选择类型。默认值是: date。 一般的laydate默认是选择yyyy-MM-dd 格式的日期。这里使用默认值
         * @param {*} format 时间格式。默认值是: yyyy-MM-dd 。这里使用默认值
         * @param {*} value 默认值。默认值需要和 format 匹配。这里不设置，默认值就是空字符串
         * @param {*} done 日期时间选择完毕的回调函数
         * 除此之外还有很多别的配置项
         */
        initLayDate: function(){

            /**
             * 渲染创建时间时间选择框插件
             */
            layui.laydate.render({
                elem: "#" + ID + "-createtime",
                done: function done(value, date, endDate) {
                    // TODO 时间变化后的回调函数可以放这里
                }
            });

            /**
             * 渲染更新时间时间选择框插件
             */
            layui.laydate.render({
                elem: "#" + ID + "-updatetime",
                done: function done(value, date, endDate) {
                    // TODO 时间变化后的回调函数可以放这里
                }
            });
        },
        /**
         * @method  初始化layui表单
         * @description layui表单里面的下拉选择框，单选框，多选框需要进行方法级的渲染
         */
        initForm: function(){
            // TODO 可以动态插入表单元素 (比如动态的插入下拉选择框的option)
            /**
             *    // 下拉的选项列表：有 id 和 name 属性
             *    var _list = [{id: 1, name: ''}];
             *    // 拼接字符串
             *    var _html = '';
             *    Array.prototype.forEach.call(_list, function(value){
             *        // TODO 这里还可以根据条件添加selected  属性
             *        _html += '<option value = "' + value.id + '">' + value.name + '</option>';
             *    });
             *    // 插入dom中
             *    $('#' + id).empty().append($(_html));
             *    // TODO 下面会调用方法来渲染，这里就不调用了
             */
            /**
             * @method  layui.form的表单渲染方法
             * @param {*} type 表单类型  默认不填就是渲染全部类型;  select: 下拉选择框;   radio: 单选框;   checkbox: 复选框;
             * @param {*} filter 表单lay-filter属性值  用来确定是渲染哪个layui表单。 默认不传就是渲染所有表单
             * @description
             *     - 仅在layui.form这个模块初次加载的时候会自动调用一次
             *     - 所以 该方法主要用于对  动态插入  的表单元素的渲染
             *     - 定向渲染: 参数只传入一个jQuery对象， 从而完成定向渲染
             */
            layui.form.render(null, ID + "-form");
        },
        /**
         * @method 添加监听事件
         * @description 需要添加 提交按钮和关闭按钮点击事件
         */
        addListener: function(){

            /**
             * 添加提交按钮的点击事件
             * @description 提交按钮点击时，需要根据当前的表单信息提交表单
             *       @method layui.form.on 这个是form表单提供的内置监听事件,它有两个参数
             *       @param {String} event(filter) 官方原话: event(filter) 是一个特定结构。event 为事件名，支持：select,checkbox,switch,radio,submit
             *                              由于之前给提交按钮添加了lay-submit的属性，所以这里可以使用 'submit' 这个 event, 括号里面在加上按钮的 lay-filter 属性。
             *                              连起来就是 'submit(User-submit)' 这个字符串了
             *       @param {Function} callback(obj) 回调函数 ，这个obj里面的field 属性就是表单信息了
             */
            layui.form.on('submit(UserAdd-submit)', function (obj) {
                /**
                 *  获取表单元素，执行接下来的操作
                 */
                var field = obj.field;
                layui.layer.confirm('确认添加?',{ closeBtn: 0 }, function (index) {
                    layui.layer.close(index);
                    /**
                     *  打开加载层。这里使用的是layui默认的加载层
                     */
                    layui.layer.load();
                    $.ajax({
                        url: URL,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(field),
                        success: function (res) {
                            /**
                             *  关闭加载层。这里使用的是layui默认的加载层
                             */
                            layui.layer.closeAll("loading");
                            if (res.code == 200) {
                                layui.layer.msg("添加成功！", { icon: 6 });
                                /**
                                 *  成功之后{@linkplain handler#closePage 关闭弹出层}，但是详情table页面还是需要手动刷新
                                 */
                                handler.closePage();
                                // TODO 成功之后刷新列表
                                layui.user.searchTable();
                            } else {
                                layui.layer.msg("操作失败！", { icon: 5 });
                            }
                            return;
                        },
                        error: function () {
                            /**
                             *  关闭加载层。这里使用的是layui默认的加载层
                             */
                            layui.layer.closeAll("loading");
                            layui.layer.msg("添加失败！", { icon: 5 });
                            return;
                        },
                    });
                },
                function (index) {
                    layui.layer.close(index);
                });
                return false;
            });

            /**
             *  点击关闭按钮时，{@linkplain handler#closePage 关闭弹出层}
             */
            $("#" + ID + "-close").off("click").on("click", function(){
                if (window.event) window.event.stopPropagation();
                handler.closePage();
            });

            /**
             *  表单元素事件监听
             */
            /**
             *  在输入账号的时候，根据需要执行回调函数
             */
            $("#" + ID + "-useraccount").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 账号 输入时监听事件
            });
            /**
             *  在输入密码的时候，根据需要执行回调函数
             */
            $("#" + ID + "-userpassword").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 密码 输入时监听事件
            });
            /**
             *  在输入用户昵称的时候，根据需要执行回调函数
             */
            $("#" + ID + "-username").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 用户昵称 输入时监听事件
            });
            /**
             *  在输入用户头像的时候，根据需要执行回调函数
             */
            $("#" + ID + "-useravatar").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 用户头像 输入时监听事件
            });
            /**
             *  在输入用户角色：user/admin的时候，根据需要执行回调函数
             */
            $("#" + ID + "-userrole").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 用户角色：user/admin 输入时监听事件
            });
            /**
             *  在输入是否删除的时候，根据需要执行回调函数
             */
            $("#" + ID + "-isdelete").off("input propertychange").on("input propertychange", function(){
                var value = $(this).val();
                // TODO 输入框 是否删除 输入时监听事件
            });
        },
        /**
         * @method 关闭弹出层
         */
        closePage: function(){
            layui.layer.close(handler.index);
        },
    };

    /**
     *  将模块放入layui中
     */
    exports(KEY, handler);
});
